import React, { Component } from 'react';
import './Myquan.scss'

class Myquan extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex:0,
            arr:["综合","销量","新品","价格","筛选"]
        }
    }
    handeClick(index){
        this.setState({
            currentIndex:index
        })
    }
    render() {
        return (
            <div className="big">
                <div className="inputbox">
                    <div className="fen"><h3>全部商品</h3></div>
                    <div className="box">
                    <input type="text" placeholder="搜索店铺内商品名"/>
                    </div>         
                </div>
            <div className="xia">
            {
                        this.state.arr.map((item,index)=>{
                            return (
                                <div className="pai" key={index} style={{color: this.state.currentIndex == index ? 'red' : ''}} onClick={()=>{
                                    this.handeClick(index)
                               }
                               }>
                               <div className="samll">{item}</div>
                              </div>    
                            )
                        })
                    }  
            </div>
  
            </div>
        );
    }
}

export default Myquan;